<!-- 班子类 -->
<template>
  <div class="personnel">
    <el-row>
      <el-col :span="4" style="border: 1px solid #eee; border-right: none">
        <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
      </el-col>
      <el-col
        :span="20"
        style="overflow-y: scroll"
        :style="{ height: heightCard }"
      >
        <el-card class="box-card" :style="{ height: heightCard }">
          <vxe-table
            border
            id="person_id"
            header-align="center"
            ref="mytable"
            highlight-current-row
            highlight-hover-row
            :loading="loading"
            :height="heightY"
            :export-config="exportConfig"
            :data="tableData"
            :custom-config="{ storage: true }"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
          >
            <vxe-table-column
              field="xuanzhong"
              type="checkbox"
              width="60"
              align="center"
              fixed="left"
            />
            <vxe-table-column
              type="html"
              field="TAG_NAME"
              show-overflow="tooltip"
              title="标签名称"
              width="280"
              align="center"
              fixed="left"
              sortable
            ></vxe-table-column>
            <vxe-table-column
              field="TAG_CODE"
              title="标签编码"
              show-overflow="tooltip"
              width="400"
              align="center"
              sortable
            ></vxe-table-column>
            <vxe-table-column
              field="LABLE"
              title="标签关系"
              show-overflow="tooltip"
              width="800"
              align="center"
              sortable
            ></vxe-table-column>
          </vxe-table>
          <div style="width: 100%; float: left">
            <vxe-pager
              background
              align="right"
              :current-page.sync="pages.currentPage"
              :page-size.sync="pages.pageSize"
              :total="pages.totalResult"
              :page-sizes="[20, 50, 100, 500, 1000]"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total',
              ]"
              @page-change="handlePageChange2"
            >
            </vxe-pager>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { tagResourceListAll } from "@/api/bianqian/tagApi";
import store from "@/store";
import radioOrgTree from "./componentsConsult/radioOrgTreelazy";
export default {
  components: { radioOrgTree },
  data() {
    return {
      exportConfig: { modes: ["current", "selected"] },
      heightY: window.innerHeight - 250 + "px",
      loading: false,
      allAlign: "center",
      heightCard: window.innerHeight - 132 + "px",
      jg_id: "",
      pages: {
        pageSize: 20,
        currentPage: 1,
        totalResult:0,
      },
      tableData: [],
      timeUsed: "",
      searchArgs: "1",
      searchManagerType: [],
      isEnableEditPerson: "",
      selectedNode:{},
      multipleSelection: [],
    };
  },
  mounted() {
    this.init("init");
    this.isEnableEditPerson = store.getters.userInfo.isEnableEditPerson;
  },
  methods: {
    init(node) {
      this.jg_id = node.id || "";
      const userInfo = JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
      let searchManagerType = "";
      if (this.searchManagerType.length != 0) {
        for (let item of this.searchManagerType) {
          searchManagerType += item + ",";
        }
        searchManagerType = searchManagerType.substring(
          0,
          searchManagerType.length - 1
        );
      }
      let isContainsOrgChild = "1";
      if (this.is_contains_org_child == false) {
        isContainsOrgChild = "0";
      }
      if (node === "init") {
        this.loading = false;
      } else {
        if (this.selectedNode !== node) {
          this.pages.currentPage = 1;
        }
        this.selectedNode = node;
        let personJsons = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          rows: this.pages.pageSize,
          page: this.pages.currentPage,
          orgId: node.id, //机构类传
          orgOrPer: "A",
        };
        tagResourceListAll(personJsons)
          .then((response) => {
            if (response.result) {
              this.tableData = response.resultdata.resultdata.data;
              this.pages.totalResult = response.resultdata.resultdata.count;
            } else {
              this.tableData = [];
              this.$message.error(response.message);
            }
          })
          .catch(() => {
            this.$message.error("内部错误！");
          });
      }
    },
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records;
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records;
    },
    handlePageChange2({ currentPage, pageSize }) {
      this.pages.currentPage = currentPage;
      this.pages.pageSize = pageSize;
      this.init(this.selectedNode);
    },
  },
};
</script>

<style scoped>
.personnel {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>